<template>
  <view class="script-detail feat-grid">

    <view class="detail-box1">
      <view class="script-item-box fx-row-b">
        <view class="script-item-box-img main-bg" :style="{'background-image': 'url('+ renderData.detail.cover +')'}"></view>
        <view class="script-item-box-content fx-col-b">
          <view class="script-item-box-content-title fx-row-b">
            <text class="title-name com-overflow">{{ renderData.detail?.title }}</text>

            <view class="title-op">
              <button @click="handleColloect" class="icon-btn-s3 icon-btn-d fx-row-c">
                <uv-icon size="28" :name="renderData.detail.bookMarked ? 'star-fill': 'star'" :color="configCss.iconStyle.color"></uv-icon>
                <text class="ml5">收藏</text>
              </button>
            </view>
          </view>

          <view class="script-item-box-content-tag com-overflow fx-row-s">
            <uv-tag v-if="renderData.detail?.type"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="renderData.detail?.type"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-for="(item,index) in renderData.detail?.age"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="item"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-if="renderData.detail?.ageRating"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="renderData.detail?.ageRating"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-for="(item,index) in renderData.detail?.tags"
                    v-show="index > 2 ? false:true"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="item" :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"  />
          </view>

          <view @click="jump('/pagesSetting/mine/userInfo?userId='+ renderData.detail.user?.id)" class="script-item-box-content-author fx-row-s">
            <uv-image
              :width = "width"
              :height = "height"
              shape="circle"
              :src="renderData.detail.user?.avatar"
            ></uv-image>
            <text class="ml15"> 作者：{{ renderData.detail.user?.nickname }}</text>
          </view>

          <view class="script-item-box-content-op fx-row-b">
            <view class="script-item-box-content-op-time">发布时间：{{ timeFormat(renderData.detail?.releaseDate) }}</view>
            <view v-if="!renderData.detail.authorized" class="script-item-box-content-op-btn">
              <button @click="jump('/pagesScript/authorize/applyAuthorize?scriptId=' + renderData.detail.script_id,true)" class="icon-btn-s3 icon-btn-a fx-row-c">
                申请授权
              </button>
            </view>
          </view>
        </view>

      </view>

      <!--评分-->
      <view class="script-detail-rate">
        <view class="script-detail-rate-title"><text>剧本评分</text></view>
        <view class="script-detail-rate-data fx-row-b"  v-if="renderData.rateObj?.statifi_level && renderData.rateObj?.statifi_level > 0">
          <view class="script-detail-rate-data-val fx-col-c" >
            <view>{{(renderData.rateObj?.summary).toFixed(1)}}</view>
            <uni-rate :color="color.colorK" :activeColor="color.colorA" allow-half :value="renderData.rateObj?.statifi_level" size="30rpx" />
          </view>
          <view class="script-detail-rate-data-star">
            <!--星值-->
            <view v-for="(itemRate,indexRate) in 5" class="script-detail-rate-data-star-list fx-row-s">
              <view class="script-detail-rate-data-star-list-icon">
                <uv-icon v-for="(itemCount,indexCount) in (5 - indexRate)" class="ml5" size="22" name="star-fill" :color="color.colorK" />
              </view>
              <view class="script-detail-rate-data-star-list-progress">
                <uv-line-progress height="11" :inactive-color="color.colorK"
                                  :active-color="configCss.iconStyle.color"
                                  :percent="renderData.rateObj.rate_distrabution?.[`${Math.abs(indexRate - 5)}`] ?? 0"
                                  :show-percent="false"
                >
                </uv-line-progress>
              </view>
            </view>

          </view>
        </view>
        <view v-if="renderData.rateObj?.statifi_level && renderData.rateObj?.statifi_level > 0" class="script-detail-rate-tip fx-row-s">
          <view class="script-detail-rate-tip-like fx-row-s">
            <text>{{ renderData.detail?.bookmark_number }}人收藏</text>
            <text class="ml10">{{renderData.detail?.played_number}}场已开</text>
          </view>
        </view>

        <view v-if="!renderData.rateObj?.statifi_level || (renderData.rateObj?.statifi_level==0)" class="script-detail-rate-no fx-row-b">
          <view>暂无评分</view>
          <view class="script-detail-rate-no-text">
            <text>{{ renderData.detail?.bookmark_number }}人收藏 </text>
            <text class="ml10">{{renderData.detail?.played_number}}场已开</text>
          </view>
        </view>
      </view>

      <view class="script-detail-line mt40">
        <text class="script-detail-line-title">剧情简介</text>
        <text class="script-detail-line-text">{{ renderData.timeObj }}</text>
      </view>

      <view v-if="renderData.detail.desc?.length>=60" class="mt20">
        <comReadIng :line="3" :content="renderData.detail?.desc"></comReadIng>
<!--        <comRead line="2" :content="renderData.detail?.desc"></comRead>-->
      </view>
      <view v-else class="mt20" style="text-indent:58rpx">
        {{renderData.detail?.desc}}
      </view>



      <view class="script-detail-line mt40">
        <text class="script-detail-line-title">角色简介</text>
        <text class="script-detail-line-text">{{ renderData.detail?.content?.players?.length }}人</text>
      </view>


      <!--角色简介-->
      <view class="script-detail-box">
        <view v-for="(item,index) in renderData.detail.content?.players" class="script-detail-box-role" v-show="isRoleDisplay(index)">
          <view class="script-detail-box-role-info fx-row-b">
            <view class="script-detail-box-role-info-name">{{ item.name }}</view>
            <view class="script-detail-box-role-info-sex">性别：{{ isGender(item.gender) }}</view>
            <view class="script-detail-box-role-info-year">年龄：{{ item.age || '未知' }}</view>
          </view>
          <view class="script-detail-box-role-description com-overflow-more">{{item.remark}}</view>
        </view>
        <view v-show="renderData.detail.content?.players && renderData.detail.content?.players.length>2" class="script-detail-box-op" @click="handleOpen">
          <text>{{ renderData.isOpenRole? '收起':'展开' }}</text>
        </view>
      </view>

      <view class="script-detail-line mt30">
        <text class="script-detail-line-title">约车信息</text>
      </view>

      <view class="script-detail-car">
        <comListItem v-show="item.status!='FREEZE'" v-for="(item,index) in renderData.partyList" :comTitle="item.address" :comDetail="timeFormat(item.time,'yyyy-mm-dd h:M')" :isArrow="false"
                     :comListStyle="configCss.listStyle"
                     :comTitleStyle="configCss.titleStyle"
                     :comDetailStyle="configCss.detailStyle"
        >
          <template #footer>
            <view class="">
              <button @click="handleGoToCar(item)" class="icon-btn-s2 icon-btn-a">申请上车</button>
            </view>
          </template>
        </comListItem>

        <comListItem v-if="isCar" comTitle="" comDetail="" :isArrow="false"
                     :comListStyle="configCss.listStyle"
                     :comTitleStyle="configCss.titleStyle"
                     :comDetailStyle="configCss.detailStyle"
        >
          <template #center>
            <view class="script-detail-car-center">
              <text>暂无约车信息</text>
            </view>
          </template>
        </comListItem>
      </view>

    </view>

    <!--评论&按钮-->
    <view class="detail-comment">
      <comComment :id="renderData.id"></comComment>
    </view>
    <iconComment initialX="0" initialY="500" :id="renderData.id" :scriptTitle="renderData.detail?.title"></iconComment>
    <comLoading :isDisplay="renderData.isDisplay"></comLoading>
  </view>

</template>
<script setup>
import {computed, ref,reactive} from "vue";
import { onLoad,onShow,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app";
//import comRead from '@/components/com-readmore/index';
import comReadIng from '@/components/com-readmore/index2';
import comListItem from '@/components/com-list/index-list';
import comComment from '@/components/com-comment/index'
import iconComment from '@/components/icon-comment/index'
import comLoading from '@/components/com-loading/index'
import noData from '@/components/com-nodata';
import { ossImage,jump,timeFormat,isGender } from '@/utils/index'
import { header,color,mine,play } from '@/enums/constants';
import playApi from "@/apis/play";
import {filterScriptTime} from "@/hooks/filterScriptTime.js"
const {width , height} = {...header.little};

const renderData = reactive({
  //加载
  isDisplay:true,
  //是否角色展开
  isOpenRole:false,
  id:'',
  detail:{
    title:''
  },
  partyList:[],
  rateObj:{},
  timeObj:{}
})

//获取剧本详情
const handleGetScriptDetail = ()=>{
  playApi.getScriptDetail({scriptId:renderData.id}).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      let content = '';
      try{
        content = JSON.parse(res.data.content) ?? undefined;
      }catch(res){}

      renderData.timeObj = filterScriptTime(res.data.timeMin,res.data.timeMax);
      renderData.detail = res.data;
      renderData.detail.content = typeof content == 'object' ? content : [];
      console.log(renderData.detail.content)
    }
  }).finally(()=>{
    renderData.isDisplay = false;
  })
}

//获取约车列表
const handleGetPartyList = ()=>{
  playApi.getPartyList({scriptId:renderData.id}).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      renderData.partyList = res.data;
    }
  })
}

//点击收藏
const handleColloect = ()=>{
  if(renderData.detail.bookMarked){
    handleCancelCollectScript()
  }else{
    handleAddCollectScript();
  }
}

//收藏剧本
const handleAddCollectScript = ()=>{
  let para = {scriptId:renderData.detail.script_id}
  playApi.addCollectScript(para).then(res=>{
    if(res.code == 'SUCCESS'){
      renderData.detail.bookMarked = true;
      uni.showToast({
        icon:'success',
        title:'收藏成功!'
      })
    }
  })
}
//取消收藏剧本
const handleCancelCollectScript = ()=>{
  let para = {scriptId:renderData.detail.script_id}
  playApi.cancelCollectScript(para).then(res=>{
    if(res.code == 'SUCCESS'){
      renderData.detail.bookMarked = false;
      uni.showToast({
        icon:'success',
        title:'已取消收藏!'
      })
    }
  })
}

//获取剧本评分
const handleGetScriptRate = ()=>{
  let para = {scriptId:renderData.id}
  playApi.getScriptRate(para).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      renderData.rateObj = res.data;
    }
  })
}

//是否约车
const isCar = computed(()=>{
  return !renderData.partyList.some((item)=>{
    return item.status == 'SUBMIT'
  })
})


//展开角色文字
const handleOpen = ()=>{
  renderData.isOpenRole = !renderData.isOpenRole;
}

//展开角色列表
const isRoleDisplay = computed(()=>{
  return (index)=>{
    if(!renderData.isOpenRole){
      if(index<=1){
        return true;
      }else{
        return false;
      }
    }else{
      return true;
    }
  }
})


//申请上车
const handleGoToCar = (item)=>{
  jump(`/pagesScript/car/applyCar?id=${item.id}&time=${new Date(item.time).getTime()}`,true)
}


onLoad((options) => {
  renderData.id = options?.id || 0;
  handleGetScriptDetail();
  handleGetPartyList();
  handleGetScriptRate();
});

onShareAppMessage((res)=>{
  if (res.from === 'menu') {// 来自页面内分享按钮
    console.log(res.target)
  }
  return {
    title: renderData.detail?.title,
    path: '/pages/play/scriptDetail?id=' + renderData.id
  }
})
onShareTimeline(()=>{
  return {
    title:renderData.detail?.title ?? '',
    query:'id=' + renderData.id
  }
})

const configCss = {
  listStyle:{
    marginTop:'20rpx',
    borderRadius:'10rpx',
    padding:'10rpx 20rpx',
    background:'rgba(255,255,255,.2)'
  },
  titleStyle:{
    width:'480rpx',
    fontSize:'30rpx',
    color:'#8B8989',
    padding:'5rpx 0rpx'
  },
  detailStyle:{
    fontSize:'30rpx',
    padding:'5rpx 0',
    color:'#fff'
  },
  iconStyle:{
    color:color.colorA,
    tagColor:'rgba(94, 94, 94, 0.2)'
  },
}

/*const isStarType = computed(()=>{
  if(renderData.detail.collectType){
    return 'star-fill';
  }else{
    return 'star';
  }
})*/

</script>

<style lang="scss" scoped>
.script-detail {
  color:$main-text-e;
  background-color:$main-d;

  .detail-box1{padding:30rpx;}

  //标题头
  &-line{
    @include main-text2;
    &-text{
      margin-left:8rpx;
      @include main-text6;
    }

  }

  //角色
  &-box{
    &-role{
      @include main-line2;
      border-radius: 15rpx;
      background-color: rgba(255,255,255,.2);
      padding:20rpx;
      padding-bottom:15rpx;
      &-info{
        text{margin-right: 10rpx;}
        &-name,&-sex,&-year{
          flex-wrap: wrap;
        }
        &-name{width:250rpx;}
        &-sex{width:150rpx;}
        &-year{width:150rpx;}
      }
      &-description{
        @include main-line1;
        @include main-text4;
        color:$main-text-b;
        -webkit-line-clamp:2;
        overflow: hidden;
      }
    }
    &-op{
      @include main-line1;
      text-align: right;
      color:$main-c;
    }
  }


  //评分样式
  &-rate{
    padding:15rpx 25rpx;
    @include main-line3;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,.2);
    &-title{}
    &-data{
      width: 98%;
      margin: 0 auto;
      padding:0rpx 10rpx 10rpx;
      &-val{@include main-text0;text-align: center;}
      &-star{
        flex-grow: 1;
        padding-left:30rpx;
        &-list{
          line-height: .8;
          flex-wrap: nowrap;
          &-icon{width: 38%;text-align: right;padding-right: 10rpx;margin-top: -3rpx;transform: translateY(3rpx);}
          &-progress{width:61%;}
        }
      }
    }
    &-tip{
      padding-top:12rpx;
      @include main-text5;
      color:$main-text-a;
      border-top: .5px solid $main-text-b;
      opacity: .9;
    }
    &-no{
      font-family: alimama;
      padding:30rpx 45rpx;
      @include main-text2;
      &-text{
        color:$main-k;
      }
    }
  }

  //约车信息
  &-car{
    &-center{
      color:$main-text-b;
      font-family: alimama;
      padding:20rpx 0;
      text-align: center;
      @include main-text2;
      opacity: .6;
    }
  }

}
</style>
